
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
	 ul li{
		list-style-type:none;
	}
  </style>
</head>
<body>
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div><img src="C:\Users\12137\Desktop\3a0a7cf5abcd9b94863c516c934d1942.jpg"></div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src="C:\Users\12137\Desktop\2.png"> -->
 
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"><i class="layui-icon layui-icon-edit" style="font-size: 30px; color: #5FB878;"></i> </i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title" style="font-size: 20px; color: #5FB878;">点击留言</h3>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h4 class="layui-timeline-title"><em>8月16日</em></h4>
      <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
	  <div class="layui-btn-group">
		 <i class="layui-icon layui-icon-release" style="font-size: 20px; color: #5FB878;">点击回复</i>  
	 </div>
      <em style="font-size: 10px;"><ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul></em>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利日
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>  



<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>
